<template>
  <div class="hot-container w">
    <!-- 热门排行标签 -->
    <ul class="hot-tag">
      <li>
        <router-link to="">
          <i></i>
          <span>热卖排行</span>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <i></i>
          <span>特价排行</span>
        </router-link>
      </li>
      <li>
        <router-link to="">
          <i></i>
          <span>新品排行</span>
        </router-link>
      </li>
    </ul>
    <!-- 热门商品 -->
    <HotShops></HotShops>
  </div>
</template>

<script>
// 商品列表
import HotShops from '@/components/hotShops/HotShops.vue'
export default {
  name: 'Hot',
  components: {
    HotShops
  }
}
</script>

<style lang="less" scoped>
.hot-container {
  padding-bottom: 35px;
  .hot-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px;
        font-size: 14px;
        color: #ccc;
        i {
          width: 35px;
          height: 45px;
          background: url('../../assets/images/home/bg0.png') no-repeat;
        }
      }
    }
    li {
      &:first-child {
        a {
          color: #e22519;
          i {
            background-position: -35px 0;
          }
        }
      }
    }
  }
}
</style>
